<script>
//by Song1w
function hide()
{
	var ss = document.getElementsByTagName("select");
	
	for (var i = 0; i < ss.length; i++)
	{
		ss[i].style.visibility = "hidden";
		
		if (!ss[i].previousSibling || ss[i].previousSibling.tagName != "SPAN" || ss[i].previousSibling.firstChild.value != ss[i].options[ss[i].selectedIndex].text)
		{
			var ssa = document.createElement("span");
			var ssi = document.createElement("input");
			var ssb = document.createElement("button");
			
			ssa.style.position = "absolute";
			ssa.style.borderColor = "#DDD";
			ssa.style.borderWidth = "2px";
			ssa.style.borderStyle = "inset";
			
			ssi.value = ss[i].options[ss[i].selectedIndex].text;
			
			ssi.style.width = (ss[i].offsetWidth - 20) + "px";
			ssi.style.height = (ss[i].offsetHeight - 8) + "px";
			ssi.style.margin = "0";
			ssi.style.padding = "0";
			ssi.style.paddingLeft = "3px";
			ssi.style.display = "inline";
			ssi.style.lineHeight = "16px";
			ssi.style.verticalAlign = "middle";
			ssi.style.border = "0";
			
			ssb.style.width = "16px";
			ssb.style.height = (ss[i].offsetHeight - 4) + "px";
			ssb.innerHTML = "v";
			ssb.style.verticalAlign = "middle";
			
			ss[i].parentNode.insertBefore(ssa, ss[i]);
			ssa.appendChild(ssi);
			ssa.appendChild(ssb);
		}
	}
}
function show()
{
	var ss = document.getElementsByTagName("select");
	
	for (var i = 0; i < ss.length; i++)
	{
		if (ss[i].previousSibling && ss[i].previousSibling.tagName == "SPAN" && ss[i].previousSibling.firstChild.value == ss[i].options[ss[i].selectedIndex].text)
		{
			ss[i].parentNode.removeChild(ss[i].previousSibling);
		}
		
		ss[i].style.visibility = "visible";
	}
	
}
function showDiv()
{
	document.getElementById('layer').style.display='block';
}
</script>

<body>
	<button onclick="showDiv()">show test layer</button>
	<button onclick="hide()">replace SELECT</button>
	<button onclick="show()">resume SELECT</button>
	<br /><hr />
	<div id="layer" style="background-color: #EEF; width:300px; height:400px; position: absolute; display:none; z-index:999; " onclick="document.getElementById('layer').style.display='none'; ">
		Overlay the contents<br />
		What has happened in IE6(Not IE7)?<br /><br />
		Click the layer to hide.
	</div>
	<select>
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
		<option>6</option>
	</select>
	<select>
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
		<option>6</option>
	</select>
	<select>
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
		<option>6</option>
	</select>
	<select>
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
		<option>6</option>
	</select>
	TEXT here
	<select>
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
		<option>6</option>
	</select>
	<select>
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
		<option>6</option>
	</select>
	<br />
	TEXT here<br />
	TEXT here<br />
	TEXT here
</body>